<template>
  <jl-base>
    <jl-header>
      <mt-header title="工程登录单 - 草稿箱" :fixed="true">
        <i slot="left">
          <mt-button icon="back" @click="back"></mt-button>
        </i>
      </mt-header>
    </jl-header>

    <jl-content>
      <div class="list_search_header">
        <input placeholder="搜索使用单位,经销商,可模糊搜索" v-model="condition">
        <span @click="searchDrafts">搜索</span>
      </div>
      <div class="qd_list" v-infinite-scroll="loadMore"
           :infinite-scroll-disabled="loading"
           :infinite-scroll-distance="10">
        <template v-for="item in list">
          <div class="qd_item">
            <div class="qd_header bor_bottom" @click="go(item)">
              <div class="w12 qd_address">
                <em class="mr5">{{ item['DLDMC'] }}</em>{{ item['ZDRQ'] }}
              </div>
              <template v-for="it of item.SK02">
                <div class="w12 mt10">
                  <span class="w12">{{it}}</span>
                </div>
              </template>
            </div>
            <div class="qd_footer mt10">
              <nut-button @click="del(item)">删除</nut-button>
            </div>
          </div>
        </template>
        <jl-bottom-loading :class="{'false':'hide'}[loading]"/>
      </div>

      <div class="tips_no_pro" v-if="this.list.length <=  0">
        <div class="tips_no_main">
          <div class="w12 tc font_gray_ccc" style="font-size:50px;"><i class="fa fa-sticky-note-o"></i></div>
          <div class="w12 tc font_size_super mt20 font_gray_ccc">暂无登录单记录</div>
        </div>
      </div>

    </jl-content>
  </jl-base>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        loading: false,
        page_num: 1,
        isEnd: false,
        condition: '',
      }
    },
    methods: {
      back() {
        this.$router.back();
      },
      loadMore() {
        if (this.isEnd) return;
        this.loading = true;
        this.page_num++;
        this.search()
      },
      searchDrafts(){
        this.list = [];
        this.page_num = 1;
        this.search();
      },
      search() {
        this.$engineer.searchDrafts({page_num: this.page_num, isStart: true, condition: this.condition})
          .then(v => {
            this.isEnd = false;
            if ($Utils.isNull(v['list'])) this.isEnd = true;
            this.list.push(...v['list']);
            this.loading = false
          })
      },
      go(item) {
        this.$router.push({
          path: '/agent/start/new',
          query: {
            jlbh: item.JLBH,
            bdbh: item.BDBH,
            DLD03: item.DLD03,
            PID: item.PID,
            GCX_SHOW: true,
            SK01: item.SK01,
            drafts: true
          }
        })
      },
      del(item) {
        this.$engineer.delDrafts(item)
          .then(v => {
            this.page_num = 1;
            this.list = [];
            this.search();
          })
      },
    },
    activated() {
      this.list = [];
      this.isEnd = true;
      this.search();
    }
  }
</script>

<style scoped>

</style>
